import { lazy } from 'react';
import { Navigate, createBrowserRouter } from 'react-router-dom';

import LazyImportComponent from '@/components/LazyImportComponent';

const routes = [
  {
    path: '/login',
    element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/Login'))} />,
  },

  {
    path: '/',
    element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/Home'))} />,
    children: [
      {
        path: '/',
        element: <Navigate to="/earn" />,
      },
      {
        path: '/earn',
        element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/Earn'))} />,
      },
      {
        path: '/friends',
        element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/Friends'))} />,
      },
      {
        path: '/quests',
        element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/Quests'))} />,
      },
    ],
  },
  {
    path: '*',
    element: <LazyImportComponent lazyChildren={lazy(() => import('@/pages/NotFound'))} />,
  },
];

const router = createBrowserRouter(routes);

export default router;
